import { Directive, ElementRef, Renderer2, Input } from '@angular/core';

@Directive({
  selector: '[buttonDynamicClass]'
})
export class ButtonDynamicClassDirective {

  @Input('buttonDynamicClass')
  set className(value: string | null) {
    if (value !== null) {
      this._className = value;
      this.updateClass();
    }
  }

  @Input('buttonDynamicClassState')
  set classActive(value: boolean | null) {
    if (value !== null) {
      this._classActive = value;
      this.updateClass();
    }
  }

  private _className: string | null = null;
  private _classActive: boolean | null = null;

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  private updateClass() {
    if (this._className && this._classActive !== null) {
      const shouldAddClass = !!this._classActive;
      if (shouldAddClass) {
        this.renderer.addClass(this.el.nativeElement, this._className);
      } else {
        this.renderer.removeClass(this.el.nativeElement, this._className);
      }
    }
  }
}